<template>
  <div class="profile-wrapper">
    <div class="profile-container">
      <n-grid v-if="userInfo" :cols="24" :x-gap="24">
        <!-- 左侧个人信息卡片 -->
        <n-grid-item :span="6">
          <n-card class="info-card">
            <div class="user-info">
              <n-avatar
                round
                size="large"
                :src="userInfo.avatar"
              />
              <h3 class="username">{{ userInfo.nickname }}</h3>
              <p class="role">{{ userInfo.role }}</p>
              <n-divider />
              <n-descriptions :column="1" label-placement="left">
                <n-descriptions-item label="手机号">
                  {{ userInfo.phone }}
                </n-descriptions-item>
                <n-descriptions-item label="邮箱">
                  {{ userInfo.email }}
                </n-descriptions-item>
                <n-descriptions-item label="部门">
                  {{ userInfo.department }}
                </n-descriptions-item>
                <n-descriptions-item label="注册时间">
                  {{ formatDate(userInfo.createTime) }}
                </n-descriptions-item>
              </n-descriptions>
            </div>
          </n-card>
        </n-grid-item>

        <!-- 右侧内容区 -->
        <n-grid-item :span="18">
          <n-card class="content-card">
            <n-tabs type="line" animated>
              <!-- 基本设置 -->
              <n-tab-pane name="basic" tab="基本设置">
                <n-form
                  ref="basicFormRef"
                  :model="basicForm"
                  :rules="basicRules"
                  label-placement="left"
                  label-width="100"
                  require-mark-placement="right-hanging"
                >
                  <n-form-item label="用户名" path="username">
                    <n-input v-model:value="basicForm.username" placeholder="请输入用户名" />
                  </n-form-item>
                  <n-form-item label="昵称" path="nickname">
                    <n-input v-model:value="basicForm.nickname" placeholder="请输入昵称" />
                  </n-form-item>
                  <n-form-item label="个人简介" path="bio">
                    <n-input
                      v-model:value="basicForm.bio"
                      type="textarea"
                      placeholder="请输入个人简介"
                      :autosize="{ minRows: 3, maxRows: 5 }"
                    />
                  </n-form-item>
                  <n-form-item label="邮箱" path="email">
                    <n-input v-model:value="basicForm.email" placeholder="请输入邮箱" />
                  </n-form-item>
                  <n-form-item label="手机号码" path="phone">
                    <n-input v-model:value="basicForm.phone" placeholder="请输入手机号码" />
                  </n-form-item>
                  <n-form-item>
                    <n-button type="primary" @click="handleBasicSubmit">保存更改</n-button>
                  </n-form-item>
                </n-form>
              </n-tab-pane>

              <!-- 安全设置 -->
              <n-tab-pane name="security" tab="安全设置">
                <n-form
                  ref="securityFormRef"
                  :model="securityForm"
                  :rules="securityRules"
                  label-placement="left"
                  label-width="100"
                  require-mark-placement="right-hanging"
                >
                  <n-form-item label="原密码" path="oldPassword">
                    <n-input
                      v-model:value="securityForm.oldPassword"
                      type="password"
                      show-password-on="click"
                      placeholder="请输入原密码"
                    />
                  </n-form-item>
                  <n-form-item label="新密码" path="newPassword">
                    <n-input
                      v-model:value="securityForm.newPassword"
                      type="password"
                      show-password-on="click"
                      placeholder="请输入新密码"
                    />
                  </n-form-item>
                  <n-form-item label="确认密码" path="confirmPassword">
                    <n-input
                      v-model:value="securityForm.confirmPassword"
                      type="password"
                      show-password-on="click"
                      placeholder="请再次输入新密码"
                    />
                  </n-form-item>
                  <n-form-item>
                    <n-button type="primary" @click="handleSecuritySubmit">修改密码</n-button>
                  </n-form-item>
                </n-form>
              </n-tab-pane>

              <!-- 通知设置 -->
              <n-tab-pane name="notification" tab="通知设置">
                <n-space vertical>
                  <n-divider title-placement="left">系统消息</n-divider>
                  <n-space align="center" justify="space-between">
                    <span>系统更新提醒</span>
                    <n-switch v-model:value="notificationSettings.systemUpdate" />
                  </n-space>
                  <n-space align="center" justify="space-between">
                    <span>安全消息提醒</span>
                    <n-switch v-model:value="notificationSettings.security" />
                  </n-space>

                  <n-divider title-placement="left">消息通知</n-divider>
                  <n-space align="center" justify="space-between">
                    <span>邮件通知</span>
                    <n-switch v-model:value="notificationSettings.email" />
                  </n-space>
                  <n-space align="center" justify="space-between">
                    <span>短信通知</span>
                    <n-switch v-model:value="notificationSettings.sms" />
                  </n-space>
                </n-space>
                <div style="margin-top: 24px">
                  <n-button type="primary" @click="handleNotificationSubmit">保存设置</n-button>
                </div>
              </n-tab-pane>

              <!-- 外观设置 -->
              <n-tab-pane name="appearance" tab="外观设置">
                <n-form
                  ref="appearanceFormRef"
                  label-placement="left"
                  label-width="160"
                  require-mark-placement="right-hanging"
                >
                  <!-- 主题模式 -->
                  <n-form-item label="深色模式">
                    <n-switch v-model:value="appearanceSettings.darkMode">
                      <template #checked>开启</template>
                      <template #unchecked>关闭</template>
                    </n-switch>
                  </n-form-item>

                  <!-- 主题色 -->
                  <n-form-item label="主题色">
                    <n-color-picker
                      v-model:value="appearanceSettings.primaryColor"
                      :swatches="[
                        '#1890ff',
                        '#52c41a',
                        '#faad14',
                        '#f5222d',
                        '#2f54eb',
                        '#722ed1'
                      ]"
                    />
                  </n-form-item>

                  <!-- 导航模式 -->
                  <n-form-item label="导航模式">
                    <n-radio-group v-model:value="appearanceSettings.navMode" name="nav-mode">
                      <n-space>
                        <n-radio value="sidebar">侧边菜单</n-radio>
                        <n-radio value="top">顶部菜单</n-radio>
                      </n-space>
                    </n-radio-group>
                  </n-form-item>

                  <!-- 页面动画 -->
                  <n-form-item label="页面动画">
                    <n-select
                      v-model:value="appearanceSettings.animation"
                      :options="[
                        { label: '无动画', value: 'none' },
                        { label: '淡入淡出', value: 'fade' },
                        { label: '滑动', value: 'slide' },
                        { label: '缩放', value: 'zoom' }
                      ]"
                    />
                  </n-form-item>

                  <!-- 组件尺寸 -->
                  <n-form-item label="组件尺寸">
                    <n-select
                      v-model:value="appearanceSettings.componentSize"
                      :options="[
                        { label: '小型', value: 'small' },
                        { label: '中等', value: 'medium' },
                        { label: '大型', value: 'large' }
                      ]"
                    />
                  </n-form-item>

                  <n-form-item>
                    <n-space>
                      <n-button type="primary" @click="handleAppearanceSubmit">保存设置</n-button>
                      <n-button @click="resetAppearance">恢复默认</n-button>
                    </n-space>
                  </n-form-item>
                </n-form>
              </n-tab-pane>
            </n-tabs>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  useMessage,
  NCard,
  NGrid,
  NGridItem,
  NAvatar,
  NDivider,
  NDescriptions,
  NDescriptionsItem,
  NTabs,
  NTabPane,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NSwitch,
  NColorPicker,
  NRadioGroup,
  NRadio,
  NSelect
} from 'naive-ui'
import { format } from 'date-fns'
import { useThemeStore } from '@/stores/theme'

const message = useMessage()
const themeStore = useThemeStore()

// 用户信息
const userInfo = ref(localStorage.getItem('user') || '{}')

// 基本设置表单
const basicFormRef = ref(null)
const basicForm = ref({
  username: userInfo.value.username,
  nickname: '',
  bio: '',
  email: userInfo.value.email,
  phone: userInfo.value.phone
})

const basicRules = {
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  email: { required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  phone: { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
}

// 安全设置表单
const securityFormRef = ref(null)
const securityForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const securityRules = {
  oldPassword: { required: true, message: '请输入原密码', trigger: 'blur' },
  newPassword: { required: true, message: '请输入新密码', trigger: 'blur' },
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value) => {
        return value === securityForm.value.newPassword
      },
      message: '两次输入的密码不一致',
      trigger: 'blur'
    }
  ]
}

// 通知设置
const notificationSettings = ref({
  systemUpdate: true,
  security: true,
  email: false,
  sms: false
})

// 外观设置
const appearanceSettings = ref({
  darkMode: themeStore.darkMode,
  primaryColor: themeStore.primaryColor,
  navMode: themeStore.navMode,
  componentSize: themeStore.componentSize,
  fixedHeader: themeStore.fixedHeader,
  animation: themeStore.animation
})

// 处理基本信息提交
const handleBasicSubmit = async () => {
  try {
    await basicFormRef.value?.validate()
    message.success('保存成功')
  } catch (err) {
    // 表单验证失败
  }
}

// 处理密码修改
const handleSecuritySubmit = async () => {
  try {
    await securityFormRef.value?.validate()
    message.success('密码修改成功')
    securityForm.value = {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  } catch (err) {
    // 表单验证失败
  }
}

// 处理通知设置
const handleNotificationSubmit = () => {
  message.success('设置已保存')
}

// 处理外观设置提交
const handleAppearanceSubmit = () => {
  themeStore.updateSettings(appearanceSettings.value)
  message.success('外观设置已保存')
}

// 重置外观设置
const resetAppearance = () => {
  themeStore.resetSettings()
  appearanceSettings.value = {
    darkMode: themeStore.darkMode,
    primaryColor: themeStore.primaryColor,
    navMode: themeStore.navMode,
    componentSize: themeStore.componentSize,
    fixedHeader: themeStore.fixedHeader,
    animation: themeStore.animation
  }
  message.success('已恢复默认设置')
}

// 在组件挂载时应用设置
onMounted(() => {
  themeStore.applySettings()
})

// 格式化日期
const formatDate = (date) => {
  return date ? format(new Date(date), 'yyyy-MM-dd HH:mm:ss') : '-'
}
</script>

<style lang="scss" scoped>
.profile-wrapper {
  min-height: 100%;
  background-color: var(--bg-color);

  .profile-container {
    padding: 24px;

    .info-card {
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

      .user-info {
        text-align: center;
        padding: 24px 0;

        :deep(.n-avatar) {
          width: 100px;
          height: 100px;
          font-size: 40px;
          margin-bottom: 16px;
          border: 4px solid rgba(255, 255, 255, 0.4);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .username {
          margin: 0 0 8px;
          font-size: 20px;
          font-weight: 600;
          color: var(--text-color);
        }

        .role {
          color: var(--text-color-secondary);
          font-size: 14px;
          margin-bottom: 24px;
        }

        :deep(.n-descriptions) {
          text-align: left;

          .n-descriptions-item-label {
            color: var(--text-color-secondary);
            padding: 12px 0;
          }

          .n-descriptions-item-content {
            color: var(--text-color);
            padding: 12px 0;
          }
        }
      }
    }

    .content-card {
      border-radius: 8px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

      :deep(.n-tabs-nav) {
        padding: 0 24px;
        margin: 0;

        &::before {
          left: 0;
          right: 0;
        }

        .n-tabs-tab {
          padding: 16px 0;
          font-size: 15px;
          transition: all 0.3s;

          &:hover {
            color: var(--primary-color);
          }

          &.n-tabs-tab--active {
            font-weight: 500;
          }
        }

        .n-tabs-tab-wrapper {
          padding: 0 20px;
        }

        .n-tabs-bar {
          background-color: var(--primary-color);
        }
      }

      :deep(.n-tab-pane) {
        padding: 24px;

        .n-form {
          max-width: 600px;

          .n-form-item {
            margin-bottom: 24px;

            .n-form-item-label {
              font-weight: 500;
              color: var(--text-color);
            }

            .n-input {
              .n-input__input-el {
                padding: 8px 12px;
                height: 38px;
              }
            }
          }

          .n-button {
            min-width: 120px;
            height: 38px;
            font-size: 14px;
          }
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .profile-container {
    padding: 16px;

    :deep(.n-grid) {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    :deep(.n-grid-item) {
      width: 100% !important;
      max-width: 100% !important;
    }

    .content-card {
      :deep(.n-tabs-nav) {
        padding: 0 16px;
      }

      :deep(.n-tab-pane) {
        padding: 16px;
      }
    }
  }
}
</style>
